<!--
 * @Description: 
 * @Date: 2024-05-16 09:57:47
 * @LastEditTime: 2024-08-25 12:55:17
-->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '审核记录',
    navigationBarTextStyle: 'white', //标题栏字体颜色
    navigationBarBackgroundColor: '#0063AF', //标题栏背景色(纯色)
  },
}
</route>
<template>
  <view class="subRecord w-screen min-h-100vh box-border bg-#F4F5F9">
    <wd-tabs v-model="tab" @change="handleChange">
      <block v-for="item in tabs" :key="item">
        <wd-tab :title="`${item}`" :name="item"></wd-tab>
      </block>
    </wd-tabs>
    <view class="w-100% overflow-hidden px-20rpx pt-20rpx box-border">
      <scroll-view scroll-x="true" show-scrollbar="false">
        <view class="flex items-center gap-20rpx">
          <view
            @click="handleMenuBar(item)"
            class="inline-block whitespace-nowrap px-15rpx py-10rpx b-#0063AF b-solid b-2rpx bg-#ffffff text-#0063AF rounded-10rpx"
            v-for="(item, index) in menuBar"
            :key="index"
            :class="{ '!bg-#0063AF !text-#fff': item == menuName }"
          >
            {{ item }}
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="py-20rpx">
      <template>
        <view
          class="p-30rpx bg-#fff rounded-15rpx relative overflow-hidden mb-20rpx"
          v-for="item in subRecordList"
          :key="item.id"
          @click="handleClick(item.id, item.status)"
        >
          <view class="flex flex-col gap-15rpx">
            <view class="text-36rpx font-550 text-#000">{{ menuName }}</view>
            <view>
              <text>提交时间：</text>
              <text>{{ formatTime(item.createTime, 'yyyy-MM-dd HH:mm:ss') }}</text>
            </view>
            <view>
              <text>提交人：</text>
              <text>
                {{ item.applicant ? item.applicant : item.name }}
              </text>
            </view>
            <view>
              <text>处理时间：</text>
              <text>
                {{ item.acceptTime ? formatTime(item.createTime, 'yyyy-MM-dd HH:mm:ss') : '— —' }}
              </text>
            </view>
          </view>
          <view class="my-20rpx">
            <wd-divider></wd-divider>
          </view>
          <view v-if="item.status == 1" class="text-center text-36rpx font-550 text-#64769D">
            点击处理
          </view>
          <view
            :class="[typeColor[item.status]]"
            class="absolute top-0 right-0 bg-#FFDCD2 text-#F01D1D px-20rpx py-10rpx rounded-10rpx"
          >
            {{ getType(item.status) }}
          </view>
        </view>
      </template>

      <wd-status-tip
        v-if="subRecordList.length == 0"
        :image-size="{
          height: 200,
          width: 300,
        }"
        image="search"
        tip="当前搜索无结果"
      />
    </view>
    <wd-loadmore v-if="subRecordList.length > 0" :state="state" @reload="loadmore" />
  </view>
</template>
<script lang="ts" setup>
import { useToast } from 'wot-design-uni'
import {
  getPetitionListAPI,
  getPublicListAPI,
  getDetentionListAPI,
  getRecordListAPI,
  getSimpt,
  getUserRoles,
} from '@/service/index/foo'
import { useUserStore } from '@/store'
import { formatTime } from '@/utils/index'
const state = ref<string>('loading')
const num = ref<number>(0)
const max = ref<number>(60)
const toast = useToast()
const tabs = ref(['全部', '审核中', '通过', '驳回'])
const menuBar = ref(['案件查询', '信访服务', '公益诉讼', '羁押必要性审查'])
const tab = ref('全部')
const subRecordList = ref([])
const stateNum = ref(null)
const pages = reactive({
  pageNo: 1,
  pageSize: 10,
})
const code = {
  anjian: '案件查询',
  xinFang: '信访服务',
  gongYi: '公益诉讼',
  jiYa: '羁押必要性审查',
}
const menuName = ref('案件查询')
const typeColor = {
  0: 'type0',
  1: 'type1',
  2: 'type3',
  3: 'type2',
}
const typeList = [
  {
    value: 0,
    label: '待审核',
  },
  {
    value: 1,
    label: '审核中',
  },
  {
    value: 2,
    label: '审核通过',
  },
  {
    value: 3,
    label: '审核驳回',
  },
]

const moldList = [
  {
    value: 1,
    label: '控告',
  },
  {
    value: 2,
    label: '举报',
  },
  {
    value: 3,
    label: '司法救助',
  },
  {
    value: 4,
    label: '刑事申诉',
  },
  {
    value: 5,
    label: '民事申诉',
  },
  {
    value: 6,
    label: '行政申诉',
  },
  {
    value: 7,
    label: '国家赔偿',
  },
]
const getMold = computed(() => {
  return function (index) {
    return moldList.filter((item) => {
      return item.value == index
    })[0].label
  }
})
const getType = computed(() => {
  return function (index) {
    return typeList.filter((item) => {
      return item.value == index
    })[0].label
  }
})
const menuList = {
  案件查询: getAnJianList,
  信访服务: getXinFangList,
  公益诉讼: getGongYiList,
  羁押必要性审查: getJiYaList,
}
const userStore = useUserStore()
onLoad((options) => {
  getSimpt().then((simpts) => {
    getUserRoles({ userId: userStore.userInfo.userId }).then((roles) => {
      const arr = simpts.data
        .filter((item) => {
          if (
            roles.data.findIndex((element) => {
              return element == item.id
            }) != -1 &&
            Object.keys(code).findIndex((element) => {
              return element == item.code
            }) != -1
          ) {
            return item
          }
        })
        .map((item) => item.code)
      if (arr.length <= 0) {
        return toast.error({
          msg: '您没有权限',
          duration: 0,
        })
      }
      menuBar.value = arr.map((item) => code[item])
      menuName.value = menuBar.value[0]
      menuList[menuName.value]()
      uni.$on('refreshPage', refreshPage)
    })
  })
})
onUnload(() => {
  uni.$off('refreshPage', refreshPage)
})
function refreshPage() {
  subRecordList.value = []
  menuList[menuName.value]()
}
onReachBottom(() => {
  console.log('触底')
  if (subRecordList.value.length === max.value) {
    state.value = 'finished'
  } else if (subRecordList.value.length < max.value) {
    pages.pageNo += 1
    loadmore()
  }
})
onPullDownRefresh(async () => {
  pages.pageNo = 1
  subRecordList.value.length = 0
  await menuList[menuName.value]()
  uni.stopPullDownRefresh()
})
function handleMenuBar(item) {
  menuName.value = item
  pages.pageNo = 1
  subRecordList.value.length = 0
  menuList[menuName.value](stateNum.value)
}
function loadmore() {
  state.value = 'loading'
  setTimeout(() => {
    menuList[menuName.value]()
  }, 1000)
}
function handleChange(value) {
  state.value = 'loading'
  subRecordList.value.length = 0
  pages.pageNo = 1
  stateNum.value = value.index
  if (value.index == 0) {
    menuList[menuName.value]()
  } else if (value.index == 1) {
    menuList[menuName.value]('1')
  } else if (value.index == 2) {
    menuList[menuName.value]('2')
  } else if (value.index == 3) {
    menuList[menuName.value]('3')
  }
}
function getGongYiList(status?: string) {
  return getPublicListAPI({
    tenantId: userStore.userInfo.tenantId,
    status: status || undefined,
  }).then((res) => {
    subRecordList.value.push(...res.data.list)
    max.value = res.data.total
    subRecordList.value.length == max.value ? (state.value = 'finished') : (state.value = 'loading')
  })
}
function getXinFangList(status?: string) {
  return getPetitionListAPI({
    tenantId: userStore.userInfo.tenantId,
    status: status || undefined,
    ...pages,
  }).then((res) => {
    subRecordList.value.push(...res.data.list)
    max.value = res.data.total
    subRecordList.value.length == max.value ? (state.value = 'finished') : (state.value = 'loading')
  })
}
function getAnJianList(status?: string) {
  return getRecordListAPI({
    tenantId: userStore.userInfo.tenantId,
    status: status || undefined,
    ...pages,
  }).then((res) => {
    subRecordList.value.push(...res.data.list)
    max.value = res.data.total
    subRecordList.value.length == max.value ? (state.value = 'finished') : (state.value = 'loading')
  })
}
function getJiYaList(status?: string) {
  return getDetentionListAPI({
    tenantId: userStore.userInfo.tenantId,
    status: status || undefined,
    ...pages,
  }).then((res) => {
    subRecordList.value.push(...res.data.list)
    max.value = res.data.total
    subRecordList.value.length == max.value ? (state.value = 'finished') : (state.value = 'loading')
  })
}
function handleClick(id, state) {
  uni.navigateTo({
    url: `/pages/mine/shenheDetail?id=${id}&menu=${menuName.value}&state=${state}`,
  })
}
</script>
<style lang="scss" scoped>
.type0 {
  color: #e6a23c;
  background: #fdf6ec;
}

.type1 {
  color: #409eff;
  background: #d9ecff;
}

.type2 {
  color: #ec2828;
  background: #ffd4d4;
}

.type3 {
  color: #67c23a;
  background: #e1f3d8;
}

::-webkit-scrollbar {
  display: none;
  /* 对于Webkit浏览器，隐藏滚动条 */
}

scroll-view ::-webkit-scrollbar {
  width: 0;
  /* 对于Webkit浏览器，隐藏滚动条并保留滚动功能 */
  height: 0;
  background: transparent;
}
</style>
